<script lang="ts" setup>
import { ref, watch, onMounted, onUnmounted, computed } from 'vue'

const emit = defineEmits(['update:modelValue', 'submit', 'close'])
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: true
  },
  showFooter: {
    type: Boolean,
    default: true
  },
  cancelLabel: {
    type: String,
    default: '取 消'
  },
  showCancel: {
    type: Boolean,
    default: true
  },
  okLabel: {
    type: String,
    default: '确 定'
  },
  showOk: {
    type: Boolean,
    default: true
  },
  center: {
    type: Boolean,
    default: false
  },
  footerCenter: {
    type: Boolean,
    default: false
  },
  loading: {
    type: Boolean,
    default: false
  },
  noPadding: {
    type: Boolean,
    default: false
  },
  noPaddingTop: {
    type: Boolean,
    default: false
  },
  isQx: {
    type: Boolean,
    default: false
  },
  isEnter: {
    type: Boolean,
    default: false
  },
  fixedHeight: {
    type: [Number, String],
    default: 0
  },
  fixedMax: {
    type: Boolean,
    default: false
  },
  footerDisabled: {
    type: Boolean,
    default: false
  },
  okDisabled: {
    type: Boolean,
    default: false
  }
})

// 状态
const isPop = ref(props.modelValue)
// 监听变化
watch(() => props.modelValue, (val: any) => {
  isPop.value = val
})

// 关闭处理
const closeHandler = () => {
  isPop.value = false
  emit('close')
  emit('update:modelValue', isPop.value)
}
// 提交处理
const submitHandler = () => {
  emit('submit')
}

onMounted(() => {
  // 绑定监听事件
  if (props.isEnter) {
    window.addEventListener('keyup', keyup)
  }
})
onUnmounted(() => {
  // 销毁事件
  if (props.isEnter) {
    window.removeEventListener('keyup', keyup, false)
  }
})
// 点击回车键登录
const keyup = (e:any) => {
  if (e.keyCode === 13 || e.keyCode === 100) {
    submitHandler()
    // submitForm()
  }
}
const outStyle = computed(() => {
  if (!props.fixedHeight) return {}
  return { height: (typeof props.fixedHeight === 'number') ? (props.fixedHeight + 'px') : props.fixedHeight }
})
</script>

<template>
  <el-dialog v-model="isPop"
             :center="center"
             :close-on-click-modal="false"
             :close-on-press-escape="false"
             :destroy-on-close="true"
             draggable
             :class="[fixedHeight?'--w-fixed-pop-win':'',fixedMax?'--w-fixed-max-pop-win':'']"
             :style="outStyle"
             @close="closeHandler">
    <!--重定义内容部分-->
    <slot name="body">
      <div :class="['pop-body', noPaddingTop ? 'pop-body-pd-t' : '', noPadding ? 'pop-body-pd' : '',fixedHeight?'pop-body-full':'']">
        <div class="pop-content">
          <slot />
        </div>

        <div v-if="showFooter" :class="['pop-footer', (center||footerCenter) ? 'pop-footer-center' : '',footerDisabled?'pop-footer-dis':'']">
          <slot name="footer">
            <el-button v-if="showCancel" type="danger" @click="closeHandler">
              {{ cancelLabel }}
            </el-button>
            <el-button v-if="showOk"
                       type="primary"
                       :disabled="okDisabled"
                       @click="submitHandler">
              {{ okLabel }}
            </el-button>
          </slot>
        </div>

        <!--加载状态-->
        <v-loading v-if="loading" :top="40" />
      </div>
    </slot>
  </el-dialog>
</template>
<style scoped lang="scss">
$pop-padding: 5px;

.pop-body-pd {
  padding: 0 !important;
}

.pop-body-pd-t {
  padding-top: 0 !important;
}

.pop-body {
  @include ver-group();
  position: relative;
  flex: none;
  width: 100%;
  padding: $pop-padding ;
  box-sizing: border-box;

  .pop-content {
    @include ver-group();
    flex: none;
    width: 100%;
    position:relative;
  }

  .pop-footer {
    @include hor-group(end);
    flex: none;
    width: 100%;
    margin-top: 10px;

    &>div {
      flex: none;
      margin-left: 20px;
    }
  }

  .pop-footer-center {
    @include hor-group(center);
  }

}

.pop-footer-dis{
  opacity: .5;
  pointer-events: none;
}
.pop-body-full{
  height:100%;
  overflow: hidden;
  .pop-content{
    flex: auto!important;
    height:100%;
    overflow: hidden;
  }
}
</style>


<style  lang="scss">

.--w-fixed-pop-win {
  @include ver-group() ;
  overflow: hidden;

  header {
    flex: none;
    width: 100%;
  }
  .el-dialog__body {
    flex: auto;
    width: 100%!important;
    height: 100%!important;
    overflow: hidden!important;
  }
}

.--w-fixed-max-pop-win{
    margin: 0 auto !important;
}

</style>
